<template>
    <div class="user">
        <div class="wrap">
            <input class="select" v-model="serach" type="text" @keyup="onSearch()" placeholder="请输入关键字">
            <div class="select">
               <el-button-group>
                   <el-button plain @click="toproductInsert" v-if="checkAction(17)">新增商品</el-button>
                 </el-button-group>
            </div>
        </div>
        <el-table
           ref="multipleTable" 
           :data="tableData"
           tooltip-effect="dark"
           border
           style="width: 100%"
           @selection-change="handleSelect"
           >
            <el-table-column prop="id" label="id" >
            </el-table-column>
            <el-table-column  label="图片" >
                <template slot-scope="scope">
                    <el-image :src="'http://localhost:7002/'+scope.row.img"></el-image>
                </template>
            </el-table-column>
          
           <el-table-column prop="name" label="名称" >
           </el-table-column>
           <el-table-column prop="price" label="价格" >
           </el-table-column>
           <el-table-column prop="cate" label="分类" >
           </el-table-column>
           <el-table-column prop="brand" label="品牌" >
           </el-table-column>
           <el-table-column   label="操作"  width="200" >
            <template slot-scope="scope">
                <el-button-group>
                  <el-button  size="mini" @click="edit(scope.row)" class="update" v-if="checkAction(18)">编辑</el-button>
                  <el-button  size="mini"  @click="del(scope.row)" class="update" v-if="checkAction(19)" >删除</el-button>  
                </el-button-group>
            </template>
           </el-table-column>
         </el-table>
         
         <div class="action">
           <el-pagination
              ref=multipleTable
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-sizes="pageSize"
             :page-size="100"
             layout="total, sizes, prev, pager, next, jumper"
             :total="count">
            </el-pagination>
         </div>
        
       </div>
</template>
<script>
export default{
    data:()=>{
       return{
         tableData: [],
         multipleSelection: [],
         count:0,
         currentPage:1,
         pageSize:[2,4,6,8],
         select:[],
         index:0,
         serach:'',
         dialogVisible:false,
         roles:[],
         selection:[],
       }
   },
   async created() {
      let res=await this.$http('product/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
      console.log(res)
      this.tableData=res.data.list;
      this.count=res.data.count;  
   },
   methods: {
    handleSelect(selection){
      for(let i=0;i<selection.length;i++){
        this.selection.push(selection[i].id)
      }
     
    },
     async handleSizeChange(val) {
         // console.log(`每页 ${val} 条`);
         for(let i=0;i<this.pageSize.length;i++){
           if(this.pageSize[i]==val){
             this.index=i;
             let res=await this.$http('product/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
             this.tableData=res.data.list;
             return
           }
         }
        
       },
     async  handleCurrentChange(val) {
         // console.log(`当前页: ${val}`);
         this.currentPage=val;
         let res=await this.$http('product/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
        //  console.log(res);
         this.tableData=res.data.list;
       },
     async onSearch(){
       let res=await this.$http('product/page?key='+this.serach);
       this.tableData=res.data.list;
     },
     edit(row){
      this.$router.push({path:`/productEdit/${row.id}`} );
     },
    async del(row){
      let res=await this.$http.post('product/trash',{
        id:row.id,
      });
      let res1=await this.$http('product/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
      this.tableData=res1.data.list;
      this.count=res1.data.count;  
     },
     toproductInsert(){
        this.$router.push('/productInsert');
      }

   },
}
</script>
<style scoped>
 .user{
     margin: 20px;
   }
 .wrap{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 .wrap .select{
     height: 40px;
     border: 1px solid #DCDFE6;
     border-radius: 5px;
     margin-bottom: 20px;
 }
 
 input::-webkit-input-placeholder{
      color: #DCDFE6;
 }
 .action{
  display: flex;
  flex-direction: row-reverse;
  margin: 20px;
 }
 
 .update{
   border: none;
   color: #008080;
 }
 .green{
   background-color: #008080;
 }
</style>